<template>
  <div class="el-scroll-box">
    <el-scrollbar ref="wrapperScroll">
      <sticky ref="sticky" :z-index="10" class-name="sub-navbar" :sticky-top="60">
        <div class="page-title-wrap">
          <div class="person-info">
            <img src="@/assets/user/Robot_Succ.png" alt="">
            <div class="info">
              <div class="name">{{ $store.state.user.name }}</div>
              <div class="desc">"您好！祝您在新的一天里健康、快乐！"</div>
            </div>
          </div>
        </div>
      </sticky>
      <div class="page-content">
        <el-menu
          :default-active="activeName"
          class="el-menu-vertical-demo"
          @select="menuSelect"
        >
          <el-menu-item v-for="item in activeMenuList" :key="item.pathName" :index="item.pathName">
            <i :class="['icon', 'iconfont', item.icon, 'el-menu-name']" style="margin-right:10px" />
            <span slot="title" class="el-menu-name">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>

        <div class="page-right">
          <keep-alive>
            <router-view />
          </keep-alive>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { getLearnAdminUser } from '@/api/learnCenter'
import Sticky from '@/components/Sticky'
export default {
  name: 'PersonCenter',
  components: {
    Sticky
  },
  data() {
    return {
      isAdminUser: false,
      menuList: [
        { id: 1, name: '我的课程', pathName: 'MyCourses', icon: 'icon-wodekecheng' },
        { id: 2, name: '我的问答', pathName: 'MyAsk', icon: 'icon-wodewenda' },
        { id: 3, name: '课程管理', pathName: 'CourseManage', icon: 'icon-kechengguanli' },
        { id: 5, name: '标签管理', pathName: 'LabelManage', icon: 'icon-biaoqianguanli' },
        { id: 6, name: '分类管理', pathName: 'TypeManage', icon: 'icon-fenleiguanli' },
        { id: 4, name: '帖子管理', pathName: 'AskManage', icon: 'icon-wendaguanli' },
        { id: 7, name: '帖子分类', pathName: 'QuestionType', icon: 'icon-wendafenlei' }
        // { id: 8, name: '统计分析', pathName: '' }
      ],
      activeMenuList: [],
      isFixedLeft: false
    }
  },
  watch: {
    $route($route) {
      if ($route.meta.activeLeftMenu) {
        this.activeName = $route.meta.activeLeftMenu
      } else {
        this.activeName = $route.name
      }
    }
  },
  created() {
    this.getRoleMenu()
    if (this.$route.meta.activeLeftMenu) {
      this.activeName = this.$route.meta.activeLeftMenu
    } else {
      this.activeName = this.$route.name
    }
  },
  mounted() {
    // 监听滚动事件
    this.wrapperScroll()
  },
  methods: {
    // 获取侧边权限
    getRoleMenu() {
      const vPar = new this.ParamArr()
      getLearnAdminUser(vPar).then(vPar => {
        const AdminUser = vPar.getBool('AdminUser')
        // console.log(AdminUser)
        this.activeMenuList = this.menuList
        if (!AdminUser) {
          this.activeMenuList = [
            { id: 1, name: '我的课程', pathName: 'MyCourses' },
            { id: 2, name: '我的问答', pathName: 'MyAsk' }
          ]
        }
        // console.log(1, this.activeMenuList)
      })
    },
    // 侧边菜单那激活
    menuSelect(name) {
      this.$router.push({ name })
    },
    // 监听滚动事件
    wrapperScroll() {
      const scrollbarEl = this.$refs.wrapperScroll.wrap
      scrollbarEl.onscroll = () => {
        this.$refs.sticky.handleScroll()
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}
.page-title-wrap {
  background-image: url('../../assets/user/UserCenter_img.png');
  background-repeat: no-repeat;
  background-size: 100% 150px;
  height: 150px;
  .person-info {
    width: 80%;
    margin: 0 auto;
    height: 150px;
    display: flex;
    align-items: center;
    img {
      width: 72px;
	    height: 72px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 40px;
      cursor: pointer;
      object-fit: cover;
    }
    .info {
      display: flex;
      flex-direction: column;
      .name {
        font-size: 24px;
        color: $primaryColor;
        margin-bottom: 10px;
      }
      .desc {
        font-size: 18px;
        color: $infoColor;
      }
    }
  }
}
.page-content {
  display: flex;
  width: 80%;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 25px;
  .el-menu-vertical-demo {
    position: fixed;
    z-index: 10;
  }
  .page-right {
    padding-left: 135px;
    width: 100%;
    transition: all .2s ease-in;
  }
}

::v-deep .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
  padding: 25px 30px;
  line-height: 0;
}
::v-deep .el-menu {
  background-color: transparent;
  .el-menu-item{
    &.is-active {
      background-color: rgba(61,109,234,.1);
      color: $primaryColor;
      border-left: 3px solid $primaryColor;
    }
  }
}
.el-menu-name {
	font-size: 16px;
	line-height: 14px;
	color: #333333;
}
</style>
